<template>
  <div class="home">
    <!-- 导航栏 -->
    <div class="navbar">
      <van-nav-bar title="傻凤系统2.0"> </van-nav-bar>
    </div>
    <!-- 导航栏结束 -->
    <router-view
      @countNum="allCount"
      @ids="getAllId"
      @act="getActive"
    ></router-view>

    <!-- 标签栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search">会员</van-tabbar-item>
      <van-tabbar-item
        icon="friends-o"
        :to="`/home/shoppingCar/${id}`"
        :badge="count"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item icon="setting-o">搜索</van-tabbar-item>
    </van-tabbar>
    <!-- 标签栏结束 -->
  </div>
</template>

<script>
import { getItemId } from "@/utils/localData";
export default {
  data() {
    return {
      active: 0, //标签栏默认选择状态
      count:
        getItemId() === null || getItemId().length === 0
          ? null
          : getItemId().length,
      id: getItemId() === null || getItemId().length === 0 ? 0 : getItemId(),
    };
  },
  methods: {
    allCount(val) {
      this.count = val;
    },
    getAllId(cids) {
      this.id = cids;
    },
    getActive(act) {
      this.active = act;
    },
  },
};
</script>

<style lang="less" scoped>
.html,
body {
  height: 100vw;
}
.home {
  position: relative;
}
.count {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home {
  padding-bottom: 50px;
  /deep/.navbar {
    color: white;
    .van-nav-bar {
      background-color: #26a2ff;
      .van-nav-bar__title {
        color: white;
      }
      .van-nav-bar__left {
        .van-icon {
          color: white;
        }
        .van-nav-bar__text {
          color: white;
        }
      }
    }
  }
}
</style>
